<template>
	<div class="token-page">
		<el-table :data="tokenList" v-loading="loading" border style="margin-bottom: 20px" :row-class-name="tableRowClassName">
			<el-table-column label="序号" type="index" width="50"></el-table-column>
			<el-table-column
				v-for="(item, i) in tableHeaders"
				:key="i"
				:prop="item.prop"
				:label="item.label"
				:width="item.width"
				:fixed="item.fixed"
				show-overflow-tooltip
			>
				<template slot-scope="scope">
					<template v-if="item.slot && item.slot == 'opt'">
						<el-link type="primary" @click="handleUpdate(scope.row)">修改</el-link>
						<!-- <el-divider direction="vertical"></el-divider> -->
						<!-- <el-link type="primary" @click="handleDelte(scope.row)">删除</el-link> -->
					</template>
					<template v-if="!item.slot">{{ item.isdate ? formatDate(scope.row[scope.column.property]) : scope.row[scope.column.property] }}</template>
					<template v-if="item.slot && item.slot == 'status'">{{ scope.row.status == 1 ? '可用' : '不可用' }}</template>
				</template>
			</el-table-column>
		</el-table>

		<el-table :data="venueList" v-loading="loading1" border stripe>
			<el-table-column label="序号" type="index" width="50"></el-table-column>
			<el-table-column label="羽毛球场地ID" prop="Venue"></el-table-column>
		</el-table>

		<el-dialog title="修改" :visible.sync="show" width="70%" :before-close="close">
			<el-form :model="form" size="small" label-width="120px" :rules="rules" ref="ruleForm">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="姓名" prop="name">
							<el-input v-model="form.name" placeholder="请输入姓名"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="下单日期" prop="order_date">
							<el-date-picker
								v-model="form.order_date"
								type="date"
								value-format="yyyy-MM-dd"
								placeholder="选择下单日期"
								style="width: 100%"
							></el-date-picker>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="下单小时" prop="order_time">
							<el-input v-model="form.order_time" placeholder="请输入下单小时"></el-input>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="用户Token" prop="token">
							<el-input v-model="form.token" placeholder="请输入用户Token"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="场地UUid" prop="venn">
							<el-input v-model="form.venn" placeholder="请输入场地UUid"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="当前token状态" prop="status">
							<el-radio v-model="form.status" :label="1">可用</el-radio>
							<el-radio v-model="form.status" :label="2">不可用</el-radio>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="close">取 消</el-button>
				<el-button type="primary" @click="confirm">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import { formatDate } from '../../utils/formatTime';
import { getTokenList, updateToken, getVennList } from '../../api/api';
const tableHeaders = [
	{ prop: 'name', label: '姓名', width: '' },
	{ prop: 'order_date', label: '下单日期', width: '' },
	{ prop: 'order_time', label: '下单小时', width: '' },
	{ prop: 'status', label: '当前token状态', width: '150', slot: 'status' },
	{ prop: 'token', label: '用户Token', width: '' },
	{ prop: 'venn', label: '场地UUid', width: '' },
	{ prop: 'opt', label: '操作', width: '', fixed: 'right', slot: 'opt' },
];
export default {
	name: 'TokenList',
	data() {
		return {
			show: false,
			loading1: false,
			loading: false,
			tableHeaders,
			tokenList: [],
			venueList: [],
			form: {
				name: '',
				order_date: '',
				order_time: '',
				status: 0,
				token: '',
				venn: '',
			},
			rules: {
				name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
				order_date: [{ required: true, message: '请输入下单日期', trigger: 'blur' }],
				order_time: [{ required: true, message: '请输入下单小时', trigger: 'blur' }],
				status: [{ required: true, message: '请选择当前token状态', trigger: 'blur' }],
				token: [{ required: true, message: '请输入token', trigger: 'blur' }],
				venn: [{ required: true, message: '请输入场地UUid', trigger: 'blur' }],
			},
		};
	},
	created() {
		this.getTokenList();
		this.getVennList();
	},
	methods: {
		tableRowClassName({ row, rowIndex }) {
			if (row.status === 2) {
				return 'row-disabled';
			} else if (row.status === 1) {
				return 'row-able';
			}
			return '';
		},
		formatDate(date) {
			return formatDate(new Date(date), 'YYYY-mm-dd HH:MM:SS');
		},
		handleUpdate(row) {
			this.show = true;
			this.form = Object.assign({}, row);
		},
		getTokenList() {
			this.loading = true;
			getTokenList().then((res) => {
				this.loading = false;
				this.tokenList = res.result;
			});
		},
		getVennList() {
			this.loading1 = true;
			getVennList().then((res) => {
				this.loading1 = false;
				this.venueList = res.result;
			});
		},
		close() {
			this.show = false;
		},
		confirm() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					this.form.UpdatedAt = undefined;
					this.form.CreatedAt = undefined;
					updateToken(this.form).then((res) => {
						if (res.code == 0) {
							this.show = false;
							this.getTokenList();
						}
					});
				} else {
					console.log('error submit!!');
				}
			});
		},
	},
};
</script>

<style >
.el-table .row-disabled {
	background: rgb(231, 128, 128);
}

.el-table .row-able {
	background: #f0f9eb;
}
</style>